<template>
	<div class="big_screen_model" id="big_search_tabel">
		<div class="model_title">
			<el-row :gutter="20">
				<el-col :span="18">
					<el-input v-model="keyword" placeholder="请输入危险源名称" size="small"></el-input>
				</el-col>
				<el-col :span="6">
					<el-button size="small" class="search" icon="el-icon-search">查询</el-button>
				</el-col>
			</el-row>
		</div>

		<div class="model_echarts" id="tabel_wrap">			
			<el-table :data="tableData" stripe style="width: 100%"  :max-height="maxHeight" >
				<el-table-column prop="name" label="危险源名称" width="100">
				</el-table-column>
				<el-table-column prop="area" label="区域" >
				</el-table-column>
				<el-table-column prop="level" label="等级">
				</el-table-column>
				<el-table-column prop="status" label="状态">
			      <template slot-scope="scope">
			        <div style="color: #FF0000;">{{scope.row.status}}</div>		      
			      </template>					
				</el-table-column>
				<el-table-column prop="action" label="查看">
			      <template slot-scope="scope">
			        <i class="el-icon-search" style="color: #fff;font-size: 16px;"></i>			      
			      </template>					
				</el-table-column>				
			</el-table>
		</div>
	</div>
</template>

<script>
	export default {
		name: '危险源列表',
		data() {
			return {
				maxHeight:0,
				keyword: '',
				tableData: [{
					area: '液氮区',
					name: '地上罐组',
					level: '一级',
					status:'报警'
				}, {
					area: '液氮区',
					name: '地上罐组',
					level: '一级',
					status:'报警'
				}, {
					area: '液氮区',
					name: '地上罐组',
					level: '一级',
					status:'报警'
				}, {
					area: '液氮区',
					name: '地上罐组',
					level: '一级',
					status:'报警'
				}, {
					area: '液氮区',
					name: '地上罐组',
					level: '一级',
					status:'报警'
				}]
			}
		},

		mounted() {           
            let max=document.getElementById('tabel_wrap').offsetHeight-10
            this.$nextTick(function(){
            	this.maxHeight=max
            })

		},
		methods: {

		}
	}
</script>
<style lang="scss">
	#big_search_tabel{
		.el-input__inner {
				background: transparent;
				border: 1px solid #8096A3;
				color: #fff;
		}
		.el-table *{text-align: center;}
		.el-table::before{height: 0;}
		.el-table thead{color: #C1E0FE;}
		.el-table__row--striped{background: url('/img/bigScreen/009.png')no-repeat!important;background-size: cover!important;}
		.el-table__row--striped td{background: transparent!important;}
		.el-table{background: transparent;color: #C1E0FE;}
		.el-table tr{background: transparent;}	
		.el-table th{background: transparent;}
		.el-table th.is-leaf{border-bottom: none;}	
		.el-table td{border-bottom: none;}
        .el-table--enable-row-hover{background: transparent;}
        .el-table__body tr:hover>td{
        	background: transparent;
        }
	
	}


</style>
<style lang="scss" scoped="">
	* {
		box-sizing: border-box;
	}
	
	.el-col {
		margin-bottom: 0;
	}
	
	.big_screen_model {
		display: flex;
		flex-direction: column;
		height: 100%;
		.model_title {
			background: url('/img/bigScreen/008.png')no-repeat;
			padding: 15px 25px;
		}
		.model_echarts {
            padding: 0 15px 10px;
			flex: 1;
		}
	}
	
	.search {
		width: 100%;
		border: 1px solid #3366CC;
		color: #fff;
		background: #085DA7;
	}
</style>